<template>
  <el-form class="main" label-width="100">
    <div class="header" v-if="state.type != 0">
      <div class="headertitle">
        <div class="headertitleText">发货单号：{{ state.info.FhNo }}</div>
        <div class="headerTip" v-if="state.type == 1">草稿</div>
        <div class="headerTip headerTipSuccess" v-if="state.type == 2">
          进行中
        </div>
        <div class="headerTip headerTipSuccess" v-if="state.type == 3">
          已完成
        </div>
      </div>
      <div class="headerRow">
        <div class="headerCol">
          <div class="headerLabel">合同单号：</div>
          <div class="headerValue">JH2401878</div>
        </div>
        <div class="headerCol">
          <div class="headerLabel">客户：</div>
          <div class="headerValue">Glong italy srl</div>
        </div>
        <div class="headerCol">
          <div class="headerLabel">公司：</div>
          <div class="headerValue">君禾泵业股份有限公司</div>
        </div>
        <div class="headerCol"></div>
      </div>
      <div class="headerRow">
        <div class="headerCol">
          <div class="headerLabel">创建时间：</div>
          <div class="headerValue">2024-05-01 17:28</div>
        </div>
        <div class="headerCol">
          <div class="headerLabel">创建人员：</div>
          <div class="headerValue">孙向明</div>
        </div>
        <div class="headerCol">
          <div class="headerLabel">最后修改时间：</div>
          <div class="headerValue">2024-05-05 18:48</div>
        </div>
        <div class="headerCol">
          <div class="headerLabel">最后修改人员：</div>
          <div class="headerValue">李今颖</div>
        </div>
      </div>
    </div>
    <div class="handel" v-if="state.type != 3">
      <div class="draft" v-if="state.type <= 1">
        <div class="draft-item" @click="saveCG">保存为草稿</div>
        <div class="draft-item" @click="saveSubmit">提交合同去审核</div>
      </div>
      <div @click="Withdrawal" v-else class="draft-out">撤回审核</div>
    </div>
    <div class="contentInfo" v-if="state.type <= 1">
      <el-row>
        <el-col :span="6" class="nomargin">
          <el-form-item label="发货单号" required>
            <el-input v-model="state.info.FhNo" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" class="nomargin">
          <el-form-item label="托运类型" required>
            <el-select v-model="state.info.ConsignmentType">
              <el-option label="整箱" value="1"></el-option>
              <el-option label="拼箱" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <!-- 业务信息 -->
    <div class="contentInfo">
      <div class="title">业务信息</div>
      <div class="content">
        <el-descriptions class="descriptions" :column="4" size="default" border>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 合同单号</div>
            </template>
            {{ state.info.ContractNo }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 公司</div>
            </template>
            {{ state.info.CompanyName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 公司地址</div>
            </template>
            {{ state.info.CompanyAddress }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 客户</div>
            </template>
            {{ state.info.CustomName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 客户地址</div>
            </template>
            {{ state.info.CustomAddress }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 贸易条款</div>
            </template>
            {{ state.info.TradeTerms }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 运输方式</div>
            </template>
            {{ state.info.TransportMode }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 运抵国</div>
            </template>
            {{ state.info.ArrivalCountry }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 目的港</div>
            </template>
            {{ state.info.DestPort }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 业务员</div>
            </template>
            {{ state.info.SalesMan }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 币种</div>
            </template>
            {{ state.info.Currency }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 预计出货时间</div>
            </template>
            {{ state.info.EstimatedShippingTime }}
          </el-descriptions-item>
          <el-descriptions-item v-if="state.type > 1">
            <template #label>
              <div class="cell-item"><span>*</span> 托运类型</div>
            </template>
            {{ state.info.ConsignmentType == "1" ? "整箱" : "拼箱" }}
            <span class="editbtn" v-if="state.type != 3" @click="ConsignmentTypeOpen">编辑</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <!-- 收发通信息 -->
    <div class="contentInfo" :class="state.type > 1 ? '' : 'contentInfo2'">
      <div class="title">收发通信息</div>
      <div class="content" v-if="state.type <= 1">
        <!-- 收货人 -->
        <el-row :gutter="12">
          <el-col :span="6">
            <el-form-item label="收货人" label-width="92px" required>
              <el-select
                v-model="state.info.ConsigneeId"
                filterable
                clearable
                placeholder="请选择"
                remote
                :remote-method="getshrData"
                :loading="state.selectLoading"
                @change="shChange"
              >
                <el-option
                  v-for="item in state.shrList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="收货人地址" label-width="92px" required>
              <el-input v-model="state.info.ConsigneeAddress"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="收货人电话" label-width="92px" required>
              <el-input v-model="state.info.ConsigneePhone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="收货人税号" label-width="92px" required>
              <el-input v-model="state.info.ConsigneeTaxID"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 发货人 -->
        <el-row
          :gutter="12"
          v-for="(item, index) in state.info.ShipperList"
          :key="index"
          class="ShipperRow"
        >
          <el-col :span="6">
            <el-form-item
              :label="'发货人' + (index + 1)"
              label-width="92px"
              required
            >
              <el-select
                v-model="item.ShipperId"
                filterable
                clearable
                placeholder="请选择"
                remote
                :remote-method="getfhrData"
                :loading="state.selectLoading"
                @change="fhChange(item)"
              >
                <el-option
                  v-for="item in state.fhrList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              :label="'发货人地址' + (index + 1)"
              label-width="92px"
              required
            >
              <el-input v-model="item.ShipperAddress"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              :label="'发货人电话' + (index + 1)"
              label-width="92px"
              required
            >
              <el-input v-model="item.ShipperPhone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              :label="'发货人税号' + (index + 1)"
              label-width="92px"
              required
            >
              <el-input v-model="item.ShipperTaxID"></el-input>
            </el-form-item>
          </el-col>
          <div class="delIcon" v-if="index > 0" @click="delShipper(index)">
            <el-icon><Delete /></el-icon>
          </div>
        </el-row>
        <div style="margin-bottom: 18px">
          <el-button type="text" @click="addShipper">+新增发货人信息</el-button>
        </div>

        <!-- 通知人 -->
        <el-row :gutter="12">
          <el-col :span="6" class="nomargin">
            <el-form-item label="通知人" label-width="92px" required>
              <el-select
                v-model="state.info.NotifierId"
                filterable
                clearable
                placeholder="请选择"
                remote
                :remote-method="gettzrData"
                :loading="state.selectLoading"
                @change="tzChange"
              >
                <el-option
                  v-for="item in state.tzrList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="nomargin">
            <el-form-item label="通知人地址" label-width="92px" required>
              <el-input v-model="state.info.NotifierAddress"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="nomargin">
            <el-form-item label="通知人电话" label-width="92px" required>
              <el-input v-model="state.info.NotifierPhone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="nomargin">
            <el-form-item label="通知人税号" label-width="92px" required>
              <el-input v-model="state.info.NotifierTaxID"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div class="content" v-else>
        <el-descriptions class="descriptions" :column="4" size="default" border>
          <!-- 收货人 -->
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 收货人</div>
            </template>
            {{ state.info.ConsigneeName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 收货人地址</div>
            </template>
            {{ state.info.ConsigneeAddress }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 收货人电话</div>
            </template>
            {{ state.info.ConsigneePhone }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 收货人税号</div>
            </template>
            {{ state.info.ConsigneeTaxID }}
          </el-descriptions-item>
          <!-- 发货人 -->
          <template
            v-for="(item, index) in state.info.ShipperList"
            :key="index"
          >
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <span>*</span> {{ "发货人" + (index + 1) }}
                </div>
              </template>
              {{ item.ShipperName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <span>*</span> {{ "收货人地址" + (index + 1) }}
                </div>
              </template>
              {{ item.ShipperAddress }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <span>*</span> {{ "收货人电话" + (index + 1) }}
                </div>
              </template>
              {{ item.ShipperPhone }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <span>*</span> {{ "收货人税号" + (index + 1) }}
                </div>
              </template>
              {{ item.ShipperTaxID }}
            </el-descriptions-item>
          </template>
          <!-- 通知人 -->
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 通知人</div>
            </template>
            {{ state.info.NotifierName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 通知人地址</div>
            </template>
            {{ state.info.NotifierAddress }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 通知人电话</div>
            </template>
            {{ state.info.NotifierPhone }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 通知人税号</div>
            </template>
            {{ state.info.NotifierTaxID }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <!-- 商品清单 -->
    <div class="contentInfo">
      <div class="title">商品清单</div>
      <div class="content">
        <div class="btn" v-if="state.type <= 1">
          <el-button @click="addCommodity" type="primary">新增</el-button>
          <el-button @click="deleteCommodity">删除</el-button>
        </div>
        <div class="table">
          <AppPageTable
            :isPagination="true"
            stripe
            :data="state.tableData.data"
            @change="getList"
            :height="0"
            :option="state.tableData.option"
            v-loading="state.tableLoading"
          >
            <el-table-column
              type="selection"
              width="40"
              align="center"
              fixed="left"
              v-if="state.type <= 1"
            />
            <el-table-column
              sortable
              prop="TaxID"
              label="税号"
              width="120"
              showOverflowTooltip
            >
              <template #default="{ row }">
                <span>{{ row.TaxID }}</span>
              </template>
            </el-table-column>
            <el-table-column
              sortable
              prop="Model"
              width="120"
              label="产品型号"
              showOverflowTooltip
            >
              <template #default="{ row }">
                <span>{{ row.Model }}</span>
              </template>
            </el-table-column>
            <el-table-column
              sortable
              prop="ProductCn"
              label="商品中文名"
              width="140"
              showOverflowTooltip
            >
              <template #default="{ row }">
                <span>{{ row.ProductCn }}</span>
              </template>
            </el-table-column>
            <el-table-column
              sortable
              prop="ProductEn"
              label="商品英文名"
              width="220"
              showOverflowTooltip
            >
              <template #default="{ row }">
                <span>{{ row.ProductEn }}</span>
              </template>
            </el-table-column>
            <el-table-column
              sortable
              prop="MeasurementUnit"
              label="计量单位"
              width="140"
              showOverflowTooltip
            >
              <template #default="{ row }">
                <span>{{ row.MeasurementUnit }}</span>
              </template>
            </el-table-column>
            <el-table-column
              sortable
              prop="Num"
              label="数量"
              width="140"
              showOverflowTooltip
            >
              <template #default="{ row }">
                <span>{{ row.Num }}</span>
              </template>
            </el-table-column>
            <el-table-column
              sortable
              prop="Price"
              label="单价"
              width="140"
              showOverflowTooltip
            >
              <template #default="{ row }">
                <span>{{ row.Price }}</span>
              </template>
            </el-table-column>
            <el-table-column
              sortable
              prop="AllPrice"
              label="总金额"
              width="140"
              showOverflowTooltip
            >
              <template #default="{ row }">
                <span>{{ row.AllPrice }}</span>
              </template>
            </el-table-column>
            <el-table-column
              sortable
              prop="BoxNum"
              label="箱数"
              width="140"
              showOverflowTooltip
            >
              <template #default="{ row }">
                <span>{{ row.BoxNum }}</span>
              </template>
            </el-table-column>
            <el-table-column
              sortable
              prop="GrossWeight"
              label="毛重"
              width="140"
              showOverflowTooltip
            >
              <template #default="{ row }">
                <span>{{ row.GrossWeight }}</span>
              </template>
            </el-table-column>
            <el-table-column
              sortable
              prop="NetWeight"
              label="净重"
              width="140"
              showOverflowTooltip
            >
              <template #default="{ row }">
                <span>{{ row.NetWeight }}</span>
              </template>
            </el-table-column>
            <el-table-column
              sortable
              prop="Volume"
              label="体积"
              width="140"
              showOverflowTooltip
            >
              <template #default="{ row }">
                <span>{{ row.Volume }}</span>
              </template>
            </el-table-column>
          </AppPageTable>
        </div>
      </div>
    </div>
  </el-form>
  <el-dialog
    class="dialog"
    v-model="state.createBillDialog.show"
    title="新增商品清单信息"
    width="1400"
    :before-close="handleClose"
  >
    <div class="form-container">
      <el-form
        :inline="true"
        :model="state.createBillDialog.query"
        label-width="100px"
        ref="form"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item prop="TaxID" label="税号">
              <el-input
                v-model="state.createBillDialog.query.TaxID"
                clearable
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="Model" label="产品型号">
              <el-select
                v-model="state.createBillDialog.query.Model"
                placeholder="请选择产品型号"
                style="width: 100%"
                clearable
                filterable
                remote
                :remote-method="getModelData"
              >
                <el-option
                  v-for="item in state.ModelList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="ProductCn" label="商品中文名">
              <el-input
                v-model="state.createBillDialog.query.ProductCn"
                clearable
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="ProductEn" label="商品英文名">
              <el-input
                v-model="state.createBillDialog.query.ProductEn"
                clearable
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item prop="MeasurementUnit" label="计量单位">
              <el-select
                v-model="state.createBillDialog.query.MeasurementUnit"
                placeholder="请选择计量单位"
                style="width: 100%"
                clearable
                filterable
                remote
                :remote-method="getMeasurementUnitData"
              >
                <el-option
                  v-for="item in state.MeasurementUnitList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="Num" label="数量">
              <el-input
                v-model="state.createBillDialog.query.Num"
                type="number"
                clearable
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="Price" label="单价">
              <el-input
                v-model="state.createBillDialog.query.Price"
                type="number"
                clearable
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="AllPrice" label="总金额">
              <el-input
                v-model="state.createBillDialog.query.AllPrice"
                type="number"
                clearable
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="BoxNum" label="箱数">
              <el-input
                v-model="state.createBillDialog.query.BoxNum"
                type="number"
                clearable
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="GrossWeight" label="毛重">
              <el-input
                v-model="state.createBillDialog.query.GrossWeight"
                type="number"
                clearable
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="NetWeight" label="净重">
              <el-input
                v-model="state.createBillDialog.query.NetWeight"
                type="number"
                clearable
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="Volume" label="体积">
              <el-input
                v-model="state.createBillDialog.query.Volume"
                type="number"
                clearable
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="productSave"> 保存 </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 托运类型修改 -->
  <el-dialog v-model="state.CTDialog.show" title="托运类型" width="244px">
    <div class="dialogContent">
      <el-select v-model="state.info.ConsignmentType">
        <el-option label="整箱" value="1"></el-option>
        <el-option label="拼箱" value="2"></el-option>
      </el-select>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="state.CTDialog.show = false">取消</el-button>
        <el-button type="primary" @click="state.CTDialog.show = false">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, toRef, reactive, onMounted } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
import request from "@/public/request";

const Store = useStore();
const Route = useRoute();

const state = reactive({
  type: 1,
  info: {
    FhNo: "SA24050019",
    ConsignmentType: "1",
    ContractNo: "JH2401878",
    CompanyName: "君禾泵业股份有限公司",
    CompanyAddress: "SD240410+11",
    CustomName: "Glong italy srl",
    CustomAddress: "Glong italy srl",
    ExamineStatus: 1,
    TradeTerms: "外销促销订单",
    TransportMode: "水路运输",
    ArrivalCountry: "POLAND",
    DestPort: "NingBo",
    SalesMan: "admin",
    Currency: "RMB",
    EstimatedShippingTime: "2024-05-22 10:25:36",
    // 收发通
    ConsigneeId: "",
    ConsigneeName: "-", //收货人
    ConsigneeAddress: "-",
    ConsigneePhone: "-",
    ConsigneeTaxID: "-",

    ShipperList: [
      //发货人
      {
        ShipperId: "",
        ShipperName: "-",
        ShipperAddress: "-",
        ShipperPhone: "-",
        ShipperTaxID: "-",
      },
    ],
    NotifierId: "",
    NotifierName: "-", //通知人
    NotifierAddress: "-",
    NotifierPhone: "-",
    NotifierTaxID: "-",
  },

  tableData: {
    //商品清单table
    data: [
      {
        TaxID: "174784474",
        Model: "Q25014M",
        ProductCn: "潜水泵",
        ProductEn: "A batch of garden pump accessories",
        MeasurementUnit: "PSC",
        Num: "400",
        Price: "25",
        AllPrice: "10000",
        BoxNum: "10000",
        GrossWeight: "100",
        NetWeight: "80",
        Volume: "200",
      },
      {
        TaxID: "174784474",
        Model: "Q25014M",
        ProductCn: "潜水泵",
        ProductEn: "A batch of garden pump accessories",
        MeasurementUnit: "PSC",
        Num: "400",
        Price: "25",
        AllPrice: "10000",
        BoxNum: "10000",
        GrossWeight: "100",
        NetWeight: "80",
        Volume: "200",
      },
    ],
    option: useTableOption(),
  },
  tableLoading: false,
  // 商品信息
  createBillDialog: {
    show: false,
    query: {
      TaxID: "",
      Model: "",
      ProductCn: "",
      ProductEn: "",
      MeasurementUnit: "",
      Num: "",
      Price: "",
      AllPrice: "",
      BoxNum: "",
      GrossWeight: "",
      NetWeight: "",
      Volume: "",
    },
  },
  CTDialog: {
    show: false,
  },

  shrList: [],
  fhrList: [],
  tzrList: [],
  ModelList: [],
  MeasurementUnitList: [],
  selectLoading: false
});

// 获取产品型号信息
const getModelData = async (val) => {
  state.selectLoading = true;
  let res = await request.get("/api/basedictdetail/querypage", {
    PageIndex: 1,
    PageSize: 15,
    DictName: '产品型号',
    KeyWords: val
  });
  state.ModelList = res.content;
  state.selectLoading = false;
}
// 获取计量单位信息
const getMeasurementUnitData = async (val) => {
  state.selectLoading = true;
  let res = await request.get("/api/basedictdetail/querypage", {
    PageIndex: 1,
    PageSize: 15,
    DictName: '计量单位',
    KeyWords: val
  });
  state.MeasurementUnitList = res.content;
  state.selectLoading = false;
}
// 获取收货人信息
const getshrData = async (val) => {
  state.selectLoading = true;
  let res = await request.get("/api/csshipperconsignee/querypage", {
    PageIndex: 1,
    PageSize: 15,
    Type: '收货人',
    Title: val,
  });
  state.shrList = res.content;
  state.selectLoading = false;
}

const shChange = (val) => {
  if(!val){
    state.info.ConsigneeAddress = "-";
    state.info.ConsigneePhone = "-";
    state.info.ConsigneeTaxID = "-";
    state.info.ConsigneeName = "-";
    return
  }
  let arr = state.shrList.filter(i => {
    return i.id == val
  })

  state.info.ConsigneeName = arr[0].title;
  state.info.ConsigneeAddress = arr[0].address;
  state.info.ConsigneePhone = arr[0].telephone;
};

// 获取发货人信息
const getfhrData = async (val) => {
  state.selectLoading = true;
  let res = await request.get("/api/csshipperconsignee/querypage", {
    PageIndex: 1,
    PageSize: 15,
    Type: '发货人',
    Title: val
  });
  state.fhrList = res.content;
  state.selectLoading = false;
}

const fhChange = (item) => {
  if(!item.ShipperId){
    item.ShipperAddress = "-";
    item.ShipperPhone = "-";
    item.ShipperTaxID = "-";
    item.ShipperName = "";
    return
  }
  let arr = state.fhrList.filter(i => {
    return i.id == item.ShipperId
  })
  item.ShipperName = arr[0].title;
  item.ShipperAddress = arr[0].address;
  item.ShipperPhone = arr[0].telephone;
};

// 新增发货人
const addShipper = () => {
  state.info.ShipperList.push({
    ShipperName: "-",
    ShipperAddress: "-",
    ShipperPhone: "-",
    ShipperTaxID: "-",
  });
};
const delShipper = (i) => {
  state.info.ShipperList.splice(i, 1);
};

// 获取通知人信息
const gettzrData = async (val) => {
  state.selectLoading = true;
  let res = await request.get("/api/csshipperconsignee/querypage", {
    PageIndex: 1,
    PageSize: 15,
    Type: '通知人',
    Title: val
  });
  state.tzrList = res.content;
  state.selectLoading = false;
}

const tzChange = (val) => {
  if(!val){
    state.info.NotifierAddress = "-";
    state.info.NotifierPhone = "-";
    state.info.NotifierTaxID = "-";
    state.info.NotifierName = "-";
    return
  }
  let arr = state.tzrList.filter(i => {
    return i.id == val
  })
  state.info.NotifierName = arr[0].title;
  state.info.NotifierAddress = arr[0].address;
  state.info.NotifierPhone = arr[0].telephone;
};

// 保存草稿
const saveCG = () => {
  state.type = 1;
  ElMessage.success("保存草稿成功");
};
// 提交审核
const saveSubmit = () => {
  ElMessage.success("提交成功");
  state.type = 2;
};

const ConsignmentTypeOpen = () => {
  state.CTDialog.show = true;
};



const handleClose = () => {
  state.createBillDialog.show = false;
};

const addCommodity = () => {
  state.createBillDialog.show = true;
};
const deleteCommodity = () => {
  if(state.tableData.option.selected.lenght == 0){
    ElMessage.warning("请选择数据");
    return
  }
  ElMessageBox.confirm("是否删除?", "提示", {
    confirmButtonText: "是",
    cancelButtonText: "否",
    type: "warning",
  })
    .then(() => {
      let ids = state.tableData.option.selected.map(i=>{
        return i.index;
      });
      const unselectItemList = state.tableData.data.filter(item => !ids.includes(item.index));
      state.tableData.data = unselectItemList;
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "删除失败",
      });
    });
};

const Withdrawal = () => {
  state.type = 1;
};

const productSave = () => {
  state.tableData.data.push(state.createBillDialog.query);
  state.createBillDialog.show = false;
  state.createBillDialog.query = {
    TaxID: "",
    Model: "",
    ProductCn: "",
    ProductEn: "",
    MeasurementUnit: "",
    Num: "",
    Price: "",
    AllPrice: "",
    BoxNum: "",
    GrossWeight: "",
    NetWeight: "",
    Volume: "",
  };
};

onMounted(() => {
  if (Route.query != {}) {
    state.type = Route.query.type ? Route.query.type : 1;
    Store.dispatch("tab/modifyTabTitle", {
      path: Route.fullPath,
      title: Route.query.title,
    });
  }
});
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
}
.handel {
  display: flex;
  width: 100%;
  height: 28px;
  border-radius: 2px;
  background: #ffffff;
  border: 1px solid #dcdcdc;
  padding: 4px 16px;

  .draft {
    display: flex;

    .draft-item {
      color: #409eff;
      margin-right: 24px;
      font-size: 12px;
      cursor: pointer;
    }
  }

  .draft-out {
    color: #409eff;
    cursor: pointer;
  }
}
.contentInfo {
  width: 100%;
  padding: 8px 12px;
  background-color: #ffffff;
  margin-top: 8px;
  border-radius: 2px;
  border: 1px solid #dcdcdc;

  .title {
    height: 22px;
    font-size: 14px;
    line-height: 22px;
    border-left: 2px solid #409eff;
    padding-left: 4px;
  }

  // :deep(.el-descriptions__label.el-descriptions__cell.is-bordered-label){
  //   width: 14px!important;
  // }
}
.contentInfo2 {
  padding-right: 32px;
}
.nomargin {
  :deep(.el-form-item--small) {
    margin-bottom: 0;
  }
}
.content {
  width: 100%;
  background-color: #ffffff;
  margin-top: 8px;

  .descriptions {
    .cell-item {
      // position: relative;
      span {
        color: #ff0000;
      }
    }

    :deep(.el-descriptions__table) {
      table-layout: fixed;
      word-break: break-all;
    }

    :deep(
        .el-descriptions__body
          .el-descriptions__table.is-bordered
          .el-descriptions__cell
      ) {
      width: 60px;
      font-weight: unset;
      font-size: 12px;
      padding: 7px 8px;
    }
    :deep(.noBglabel) {
      background: transparent;
      border-left: none;
      border-bottom: none;
      border-right: none;
      &:last-child {
        border-right: 1px solid #ebeef5;
      }
    }

    :deep(.el-descriptions__label.el-descriptions__cell.is-bordered-label) {
      width: 25px !important;
    }
  }
}
.ShipperRow {
  position: relative;
}
.delIcon {
  position: absolute;
  top: 4px;
  right: -14px;
  cursor: pointer;
  i {
    color: #f56c6c;
    font-size: 14px;
  }
}
.btn {
  margin-bottom: 8px;
}
.form-container {
  // border: 1px solid #e8e8e8;
  padding: 6px 6px 6px 8px;
  background-color: #ffffff;

  :deep(.el-form-item--small .el-form-item__label) {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.85);
  }

  :deep(.el-input--suffix .el-input__inner) {
    padding-right: 4px;
  }

  :deep(.el-form--inline .el-form-item) {
    display: flex;
    margin-right: 0;
  }

  :deep(.el-form-item--small.el-form-item) {
    margin-bottom: 8px;
  }
}
.header {
  border-radius: 2px;
  background: #ffffff;
  border: 1px solid #dcdcdc;
  box-sizing: border-box;
  padding: 8px 12px;
  margin-bottom: 8px;

  .headertitle {
    display: flex;
    align-items: center;
    .headertitleText {
      color: rgba(0, 0, 0, 0.85);
      font-size: 14px;
      line-height: 22px;
      letter-spacing: 0px;
    }
    .headerTip {
      border-radius: 2px;
      background: rgba(217, 217, 217, 0.1);
      border: 1px solid rgba(217, 217, 217, 1);
      padding: 2px 4px;
      color: rgba(0, 0, 0, 0.6);
      font-size: 12px;
      line-height: 20px;
      letter-spacing: 0px;
      margin-left: 12px;
    }
    .headerTipSuccess {
      background: rgba(121, 180, 60, 0.06);
      border: 1px solid rgba(121, 180, 60, 1);
      color: rgba(121, 180, 60, 1);
    }
  }
}
.headerRow {
  margin-top: 8px;
  display: flex;
  .headerCol {
    flex: 1;
    display: flex;
    .headerLabel {
      color: rgba(0, 0, 0, 0.6);
      font-size: 12px;
      line-height: 22px;
      letter-spacing: 0px;
      text-align: left;
      width: 85px;
    }
    .headerValue {
      color: rgba(0, 0, 0, 0.6);
      font-size: 12px;
      line-height: 22px;
      letter-spacing: 0px;
      text-align: left;
      flex: 1;
    }
  }
}
.editbtn {
  color: #409eff;
  margin-left: 8px;
  cursor: pointer;
}
</style>
